<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-if和v-else-if和v-else的使用</title>
</head>
<body>
<div id="app">
  <!--v-if、v-else-if、v-else条件判段的使用-->
  <h2 v-if="score >= 90">优秀</h2>
  <h2 v-else-if="score >= 80">良好</h2>
  <h2 v-else-if="score >= 60">及格</h2>
  <h2 v-else>不及格</h2>
  <!--使用计算属性的方式显示起来更加简洁，如果涉及到v-else-if的使用，推荐在计算属性中更好-->
  <h1>{{resultScore}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue',
      score: 80
    },
    computed: {
      resultScore() {
        let scoreMessage = '';
        if (this.score >= 90) {
          scoreMessage = '优秀';
        } else if (this.score >= 80) {
          scoreMessage = '良好';
        } else if (this.score >= 60) {
          scoreMessage = '及格';
        } else {
          scoreMessage = '不及格';
        }
        return scoreMessage;
      }
    }
  });
</script>
</body>
</html>
